<?php
	session_start();
	include('utils.php');
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>iQuit | Motivate</title>
        <meta name="description" content="A mobile application to help you quit smoking.">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
		<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="http://code.highcharts.com/highcharts.js"></script>
		<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>
		<script src="js/jquery.serialScroll-1.2.2-min.js"></script>
		<script>
			function init() {
				var chart;
				
				$(function () {					
					$(document).ready(function() {
						chart = new Highcharts.Chart({
							chart: {
								renderTo: 'progress-graph',
								type: 'line',
								width: 320,
								height: 200,
								plotBackgroundColor: '#ffffff',
								backgroundColor: '#ffb469',
								marginLeft: 50,
								marginBottom: 40,
							},
							credits: {
								enabled: false
							},
							title: {
								text: null,
								x: -20 //center
							},
							xAxis: {
								title: {
									text: 'Week',
									style: {
										color: '#ffffff',
										fontWeight: 'normal'
									}
								},
								categories: ['1', '2', '3', '4', '5', '6']
							},
							yAxis: {
								title: {
									text: 'No. of Cigarettes',
									style: {
										color: '#ffffff',
										fontWeight: 'normal'
									}
								},
								allowDecimals: false,
								tickPixelInterval: 10,
								plotLines: [{
									value: 0,
									width: 1,
									color: '#808080'
								}]
							},
							tooltip: {
								formatter: function() {
										return '<b>'+ this.series.name +'</b><br/>'+
										'Week ' + this.x +': '+ this.y +' cigarettes';
								}
							},
							legend: {
								layout: 'vertical',
								align: 'right',
								verticalAlign: 'top',
								x: -10,
								y: 0,
								borderWidth: 0,
								floating: true,
								enabled: false
							},
							plotOptions: {
								series: {
									marker: {
										enabled: false
									}
								}
							},
							series: [{
								name: 'You',
								data: [12, 12, 11, 11, 10, 9]
							}, {
								name: 'Anon1',
								data: [7, 6, 5, 5, 5, 5],
								visible: false
							}, {
								name: 'Anon2',
								data: [12, 12, 12, 12, 11, 11],
								visible: false
							}]
						});
						
						// the button action
						$button = $('#show-compare');
						$button.click(function() {
							for (var i = 1; i < chart.series.length; i++) {
								var series = chart.series[i];
								if (series.visible) {
									series.hide();
									$button.html('Compare to community');
								} else {
									series.show();
									$button.html('Hide comparison');
								}
							}
						});
					});						
				});
				
				jQuery(function( $ ){
					$('#main-wrapper').serialScroll({
						target:'#content-motivate',
						items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
						prev:'#left-arrow',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
						next:'#right-arrow',// Selector to the 'next' button (absolute too)
						axis:'xy',// The default is 'y' scroll on both ways
						duration:500,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
						force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
						
						//queue:false,// We scroll on both axes, scroll both at the same time.
						//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
						//stop:false,// Each click will stop any previous animations of the target. (false by default)
						//lock:true, // Ignore events if already animating (true by default)		
						start: 	<?php 
									if (isset($_GET['q'])) {
										echo $_GET['q'];
									} else {
										echo 0;
									}									
								?>, // On which element (index) to begin ( 0 is the default, redundant in this case )		
						//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
						//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
						//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
						//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
						//interval:1000, // It's the number of milliseconds to automatically go to the next
						//constant:true, // constant speed
						
						onBefore:function( e, elem, $pane, $items, pos ){
							/**
							 * 'this' is the triggered element 
							 * e is the event object
							 * elem is the element we'll be scrolling to
							 * $pane is the element being scrolled
							 * $items is the items collection at this moment
							 * pos is the position of elem in the collection
							 * if it returns false, the event will be ignored
							 */
							 //those arguments with a $ are jqueryfied, elem isn't.
							e.preventDefault();
							if( this.blur )
								this.blur();
						},
						onAfter:function( elem ){
							//'this' is the element being scrolled ($pane) not jqueryfied
						}
					});
				});
			}
			
			window.addEventListener('load', init, false);
			
		</script>
	</head>
	<body>
		<div id="main-wrapper">
			<div id="left-arrow">
				<img src="images/left-arrow.png" width="50" height="200" alt="Previous page" border="0"/>
			</div>
			<?php 
				include "includes/nav.php";
			?>
			<header>
				iQuit
			</header>
			<div id="content-motivate">
				<ul>
					<li>
						<div class="blackboard">
							<p>Keep at it, you're making progress towards your savings goal!</p>				
							<div class="progress-bar">
								<span style="height: <?php echo calc_savings_percentage(calc_savings($_SESSION['spend-per-week'], $_SESSION['initial-smoke-per-day'], $_SESSION['current-smoke-per-day'], $_SESSION['days-active']), $_SESSION['savings-goal']); ?>%"></span>
							</div>
							<div id="savings-goal">					
								$<?php echo $_SESSION['savings-goal'] ?>
							</div>
							<div id="progress-amount">
								$<?php echo round(calc_savings($_SESSION['spend-per-week'], $_SESSION['initial-smoke-per-day'], $_SESSION['current-smoke-per-day'], $_SESSION['days-active']), 2);?>
							</div>	
							<p id="things-to-buy">Think about what you could do with that money:</p>	
						</div>
						<div id="savings-items">
							<div class="savings-item" id="item-1">
								<!-- Change left image based on savings goal -->
								<?php
									if ($_SESSION['savings-goal'] < 101) echo '<img src="images/100.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 501) echo '<img src="images/500.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 1001) echo '<img src="images/1000.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 5001) echo '<img src="images/5000.png" border="0" width=89 height="110"/>';
									else echo '<img src="images/10000.png" border="0" width=89 height="110"/>';
								?>
							</div>
							<div class="savings-item" id="item-2">
								<!-- Change right image based on savings goal -->
								<?php
									if ($_SESSION['savings-goal'] < 101) echo '<img src="images/100b.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 501) echo '<img src="images/500b.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 1001) echo '<img src="images/1000b.png" border="0" width=89 height="110"/>';
									else if ($_SESSION['savings-goal'] < 5001) echo '<img src="images/5000b.png" border="0" width=89 height="110"/>';
									else echo '<img src="images/10000b.png" border="0" width=89 height="110"/>';
								?>
							</div>
						</div>
					</li>
					<li>
						<div class="blackboard">
							<h2>Your progress so far:</h2>				
							<div id="progress-graph"></div>		
							<div id="compare">
								<input type="checkbox" id="show-compare" /><label for="show-compare">Compare to Community</label>						
							</div>	
						</div>							
						<h3>
							Current goal
						</h3>
						<div style="padding-left: 20px;"><br/>
							<?php 
								if ($_SESSION['current-smoke-per-day'] < $_SESSION['initial-smoke-per-day']) echo "You're down to ".$_SESSION['current-smoke-per-day']." cigarettes per day!"; 
								else if ($_SESSION['current-smoke-per-day'] > $_SESSION['initial-smoke-per-day']) echo "";
								else if ($_SESSION['current-smoke-per-day'] == $_SESSION['initial-smoke-per-day']) echo "Work on getting down to ".($_SESSION['initial-smoke-per-day'] - 1)." per day."
							?>
						</div>
					</li>
					<li>
						<div class="blackboard">
							<h2>Your health is already improving!</h2>	
						</div>
						<h3>
							Latest Milestone
						</h3>
						<div id="milestones" style="padding-left: 20px;"><br/>
							<?php 
								echo "<p>You've been active for ".$_SESSION['days-active']." days.</p>";
								if ($_SESSION['days-active'] < 3) echo "<p>After 12 hours the carbon monoxide level in your blood has returned to normal and oxygen levels are increasing. Almost all the nicotine will be gone from your body!</p><p>At 3 days, your breath, clothes and hair will smell fresher, your meals will taste better and the nicotine stains on your fingers will start to disappear!</p>";
								else if ($_SESSION['days-active'] < 30) echo "<p>After 3 days, your breath, clothes and hair is smelling fresher, your meals taste better and nicotine stains on your fingers are disappearing.</p><p>At one month, your blood pressure will return to a normal level!</p>";
								else if ($_SESSION['days-active'] < 60) echo "<p>After one month, your blood pressure is back to a normal level</p><p>After two months, your blood circulation will start to improve. Your risk of heart attack will begin dropping and your lung function will start to improve!</p>";
								else if ($_SESSION['days-active'] < 270) echo "<p>After two months, your blood circulation has started to improve. Your risk of heart attack has started dropping and your lung function has started to improve!</p><p>At nine months, brethlessness and coughing will be decreasing!</p>";
								else if ($_SESSION['days-active'] < 365) echo "<p>After nine months, breathlessness and coughing has decreased.</p><p>At twelve months, your risk of dying from heart disease is half that of a continuing smoker!</p>";
								else echo "<p>Congratulations on reaching one year! Your risk of dying from heart disease is now half that of a continuing smoker.</p><p>From here, your risk of stroke and heart disease continues to decrease, your lung cancer deat rate will reduce dramatically, as will your risk of other cancers.</p>";
							?>
							<p><a href="motivate-health.php">See all Milestones</a></p>
							<div id="copyright">
							<p>Information from http://www.mayoclinic.com/health/nicotine-craving/SK00057</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="right-arrow">
				<img src="images/right-arrow.png" width="50" height="200" alt="Next page" border="0"/>
			</div>
		</div>
		
	</body>
</html>